<template>
  <a-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">

    <a-spin :spinning="confirmLoading">


        <a-card class="card"  :bordered="false">
        <a-form layout="vertical">
          <a-row :gutter="24">
            <a-col >
                <a-form-item
                  label="强制上报说明:"
                >
                  <a-textarea rows="4" v-model="force" placeholder="请输入强制上报说明"/>
                </a-form-item>
            </a-col>
          </a-row>
      </a-form>
      <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item label="文件上传:">
                <j-upload v-model="fileList"></j-upload>
              </a-form-item>
            </a-col>
<!--            <a-col :span="12">
              选中的值(v-model)：
              <j-ellipsis :value="fileList" :length="30" v-if="fileList.length>0"/>
            </a-col>-->
          </a-row>
      </a-form>
        </a-card>
    </a-spin>
  </a-modal>
</template>

<script>
import {httpAction,putAction} from '@/api/manage'
import pick from 'lodash.pick'
import moment from "moment"
import JUpload from '@/components/jeecg/JUpload'

export default {
  name: "JeecgDemoTabsModal",
  components: {
    JUpload
  },
  data() {
    return {
      record:{
        id:"",
        forcedesc:'',
        forceurl:''
      },
      title: "操作",
      force:'',
      visible: false,
      model: {},
      fileList:[],
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        add: "/test/jeecgDemo/add",
        edit: "/test/jeecgDemo/edit",
      },
    }
  },
  created() {
  },
  watch: {
    'fileList': {
      handler (newName, oldName) {
        if(newName!=null){
          if(newName[0]!=null){
            let list=[];
            if(Array.isArray(newName)){
              list.push(newName[newName.length-1]);
            }else {
              let files=newName.split(",");
             list.push(files[files.length-1]);
            }
            if(this.fileList[0]!=list[0]){
              this.fileList=list;
            }
          }
        }
      }
    }
  },
  methods: {
    add(record) {
      this.record.id=record.ID;
      this.force=record.FORCEDESC;
      this.fileList=[];
      this.fileList.push(record.FORCEURL);
      this.edit(record);
    },
    edit(record) {
      this.form.resetFields();
      this.model = Object.assign({}, record);
      this.visible = true;
    },
    close() {
      this.$emit('close');
      this.visible = false;
    },
    handleOk() {
      const that = this;
      // 触发表单验证
      if((this.force==null||this.force.trim()=='')&&(this.fileList==null||this.fileList.length==0)){
        that.$message.warning("请输入强制上报说明或上传强制上报文件");
        return false;
      }
      this.record.forcedesc=this.force;
      if(Array.isArray(this.fileList)){
        this.record.forceurl=this.fileList[0];
      }else {
        this.record.forceurl=this.fileList;
      }
      putAction("/messagemanagement/llbbMessageManagement/force", this.record).then((res) => {
        if (res.success) {
          that.$message.success(res.message);
          that.$emit('ok');
        } else {
          that.$message.warning(res.message);
        }
      }).finally(() => {
        that.confirmLoading = false;
        that.close();
      })
    },
    handleCancel() {
      this.close()
    },
    newRow () {
      // 通过时间戳生成 UUID
      let uuid = Math.round(new Date().getTime()).toString();
      console.log('uuid: '+ uuid)
      this.data.push({
        key: uuid,
        name: '',
        workId: '',
        department: '',
        editable: true,
        isNew: true
      })
    },
    removeRow (key) {
      const newData = this.data.filter(item => item.key !== key)
      this.data = newData
    },
    saveRow (key) {
      let target = this.data.filter(item => item.key === key)[0]
      target.editable = false
      target.isNew = false
    },
    handlerRowChange (value, key, column) {
      const newData = [...this.data]
      const target = newData.filter(item => key === item.key)[0]
      if (target) {
        target[column] = value
        this.data = newData
      }
    },
    editRow (key) {
      let target = this.data.filter(item => item.key === key)[0]
      target.editable = !target.editable
    },
    cancelEditRow (key) {
      let target = this.data.filter(item => item.key === key)[0]
      target.editable = false
    },
  }
}
</script>

<style scoped>
.ant-modal-body {
  padding: 8px!important;
}
.ant-form-item-label{
  float: left !important;
}
</style>